<template>
    <view class="gw-vip-change common-flex-between" :class="{'active': isActive}">
        <text class="vip-name">{{item.vipCardName}}</text>
       <view class="vip-price">
           <text class="old-price">
               <text class="price">¥</text>{{ item.vipCardReferenceMoney}}
           </text>
           <text class="now-price">
              <text class="price">¥</text>{{ item.vipCardDactualMoney }}
           </text>
       </view>
    </view>
</template>

<script>
    export default {
        name: "gw-search-input",
        props: {
            isActive: {
                defalut: false,
                type: Boolean
            },
            item: {
                defalut: ()=>{},
                type: Object
            }
        },
        data(){
            return {
                value: ''
            }
        },
        methods: {

        }
    }
</script>

<style scoped lang="scss">
   .gw-vip-change{
       width:690rpx;
       height:140rpx;
       background:rgba(255,255,255,1);
       box-shadow:0rpx 3rpx 20rpx rgba(0,0,0,0.08);
       border-radius:10rpx;
       position: relative;
       display: flex;
       align-items: center;
       padding: 0 56rpx 0 40rpx;
       box-sizing: border-box;
       margin-bottom: 20rpx;
       .vip-name{
           font-size: 32rpx;
           font-weight:bold;
       }
       .vip-price{
           padding: 20rpx;
           box-sizing: border-box;
           color: #fff;
           .now-price{
               font-size:34rpx;
               font-weight:bold;
               color: #F02323;
           }
           .old-price{
               font-size:24rpx;
               text-decoration: line-through;
               margin-right: 55rpx;
               color: #999999;
           }
           .price{
               font-size: 24rpx;
           }
       }
       &.active{
           background-color: #2BA8FC;
           color: #ffffff;
           .now-price, .old-price{
               color: #ffffff;
           }
       }

   }
</style>